<template>
  <div>
    <div class="check">
      <div  @click="showbox">
        <span class="spanstyle">{{val}}</span>
      </div>
      <div v-show="fold" class="dropbox">
        <div
          @click="check(item)"
          v-for="(item, index) in select"
          :key="index"
          class="select"
          >{{ item }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
	props: ['text','select','disabled'],
	watch: {
		text(newVal) {
			this.val = newVal //对父组件传过来的值进行监听，如果改变也对子组件内部的值进行改变
		}
	},
  data() {
    return {
      val:this.text,
      fold: false,
      border: true,
      size: 18,
    };
  },
  methods: {
    showbox() {
		if(!this.disabled){
			this.fold = !this.fold;
		}
    },
    check(item) {
        this.val=item
        this.fold = !this.fold;
        this.$emit('selectbox',item)
    }
  },
};
</script>
<style scoped>
.check {
  width: 100%;
  height: 15px;
  margin: 1px;
  text-align: center;
  background-color: #e2e2e2;
  border: 1px solid #b1b1b1;
  border-radius: 1px;
}
.imgstyle {
  position: relative;
  top: 5px;
}
.dropbox {
  position: relative;
  z-index: 100;
  top: 6px;
  background-color: #eaeaea;
  height: 80px;
  border: 1px solid #F7F7F7;
  box-shadow:0 4px 3px rgb(0 0 0 / 3%);
  border-radius: 0 0 1px 1px;
  overflow-y: scroll;
}
.select {
  width: 100%;
  border-bottom-color: #c3c3c3;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  height: 25px;
}
.spanstyle{
    color: #000000;
    display: inline-block;
    width: 100%;
}
</style>